
<script>
import { reactive, toRefs } from "vue";

import SunburstChart from "@/components/Charts/SunburstChart.vue";
export default {
  components: { SunburstChart },
  setup() {
    const state = reactive({
      title:'旭日图',
      dataList: [
  {
    name: 'Grandpa',
    children: [
      {
        name: 'Uncle Leo',
        value: 15,
        children: [
          {
            name: 'Cousin Jack',
            value: 2
          },
          {
            name: 'Cousin Mary',
            value: 5,
            children: [
              {
                name: 'Jackson',
                value: 2
              }
            ]
          },
          {
            name: 'Cousin Ben',
            value: 4
          }
        ]
      },
      {
        name: 'Father',
        value: 10,
        children: [
          {
            name: 'Me',
            value: 5
          },
          {
            name: 'Brother Peter',
            value: 1
          }
        ]
      }
    ]
  },
  {
    name: 'Nancy',
    children: [
      {
        name: 'Uncle Nike',
        children: [
          {
            name: 'Cousin Betty',
            value: 1
          },
          {
            name: 'Cousin Jenny',
            value: 2
          }
        ]
      }
    ]
  }
],
      title: "出入口客流按小时统计",
    });

    return { ...toRefs(state) };
  },
};
</script>

<template>
  <div style="display: flex; height: 100%">
    <SunburstChart :title="title" :dataList="dataList" />
  </div>
</template>

<style scoped>

</style>